<!-- 护理项目列表页 -->
<template>
  
  <div class="min-h serveProject bg-wt">
    <!-- 显示搜索表单子组件 -->
     <SearchForm
          :searchData="pagination"
          @handleClear="handleClear"
          @handleReset="handleReset"
          @handleSearch="getList"
          ></SearchForm>
      <TableList
        :data="data"
        :bordered="bordered"
        :hover="hover"
        :size="size"
        :total="total"
        :pagination="pagination"
        @onPageChange="onPageChange"
        @handleBulid="handleBulid"
        @handleEdit="handleEdit"
        ></TableList>
      <!-- 显示新增或修改对话框
      ref="formRef" 定义整子组件对象的引用，formRef代表整个子组件对象
      -->
      <DialogForm
        ref="formRef"
        :visible="visible"
        :title="title"
        :data="fromDataRef"
        @handleClose="handleClose"
        @handleAdd="handleAdd"
        @handleEdit="handleEditFrom"
        ></DialogForm>
  </div>
</template>

<script setup lang="jsx">
import { onMounted,ref } from 'vue'
import { getProjectDetails, getProjectList,projectAdd, projectUpdate } from '@/api/serve'

  //导入分页列表查询子组件
  import TableList from '@/pages/serve/plan/project/components/TableList.vue'
  //导入搜索表单组件
  import SearchForm from '../nurse/components/SearchForm.vue'
  //导入新增或修改对话框子组件
  import DialogForm  from '@/pages/serve/plan/project/components/DialogForm.vue'
import { MessagePlugin } from 'tdesign-vue-next'

  const data = ref([])
  const total = ref(0)
  const bordered = ref(true)
  const hover = ref(false)
  const size = ref('medium')

  
const pagination = ref({
  pageNum: 1,
  pageSize: 5
});
//当页码或每页大小改变的时候触发的事件函数
const onPageChange = (pageInfo) => {
  console.log(pageInfo);
  //当页码或每页大小改变更新pagination中的数据
  pagination.value.pageNum = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  //重新查询数据
  getList()
}
//远程调用分页查询护理项目列表
const getList = async () => {
  //远程接口调用
  const reselt = await getProjectList(pagination.value)
  //判断调用成功
  if(reselt.code == 200){
    data.value = reselt.data.records
    total.value = reselt.data.total
  }
}

//钩子函数
onMounted(() => {
  getList()
})

//handleClear点击事件，清除当前表单元素数据
const handleClear = (val) => {
  if(val == 'name'){
    //清除name数据
    pagination.value.name = ''
  }else if (val == 'status'){
    //清除status数据
    delete pagination.value.status
  }
  getList()
}
//headleReset点击事件，重置表单所有数据
const headleReset = () => {
  //重置pagination数据
  pagination.value = {
    pageNum: 1,
    pageSize: 5
  }
  //重置查询数据
  getList()
}

//新增对话框操作逻辑
const visible = ref(false)
const title = ref('')
const formRef = ref({})
//新增按钮事件
const handleBulid = () => {
  title.value = '新增'
  visible.value = true//显示新增或编辑对话框
}
//关闭新增或修改对话框
const handleClose = () => {
  visible.value = false
}
//新增护理项目点击事件
const handleAdd = async (formData) => {
  //远程调用新增护理项目接口
  const result = await projectAdd(formData)
  //判断返回code是否为200
  if (result.code == 200) {
    //成功，提示成功
    MessagePlugin.success('操作成功')
    //关闭对话框
    visible.value = false
    //情况表单数据
    formRef.value.handleClear()
    //重新查询
    getList()
  }else{
    //失败，弹出失败消息
    MessagePlugin.error(result.msg)
  }
}
//编辑护理项目对话逻辑处理
const fromDataRef = ref([])
const handleEdit = async (id) => {
  const result = await getProjectDetails(id)
  if(result.code == 200){
    fromDataRef.value = result.data
    title.value = '编辑'
    visible.value = true
  }else{
    MessagePlugin.error(result.msg)
  }
}
//修改保存点击事件
const handleEditForm = async (formData) => {
  const result = await projectUpdate(formData)
  if(result.code == 200){
    MessagePlugin.success('修改成功')
    visible.value = false
    formRef.value.handleClear()
    getList()
  }else{
    MessagePlugin.error(result.msg)
  }
}
</script>
